<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>CSS3 3D变形制作产品信息展示</title>
	<style type="text/css">
		@import url(http://fonts.googleapis.com/css?family=Graduate|Oleo+Script);

		body {
		  margin-top: 5em;
		  text-align: center;
		  color: #414142;
		  background: rgb(246,241,232);
		  background-image: -ms-radial-gradient(farthest-side ellipse at center,  rgba(246,241,232,1) 39%,rgba(212,204,186,1) 100%);
		  background-image: -webkit-radial-gradient(farthest-side ellipse at center,  rgba(246,241,232,1) 39%,rgba(212,204,186,1) 100%);
		  background-image: radial-gradient( farthest-side ellipse at center,  rgba(246,241,232,1) 39%,rgba(212,204,186,1) 100%);
		}

		h1, em, #information {
		  display: block;
		  font-size: 25px;
		  font-weight: normal;
		  font-family: "Graduate";
		  margin: 2em auto;
		}

		a {
		  color: #414142;
		  font-style: normal;
		  text-decoration: none;
		  font-size: 20px;
		}
		
		a:hover {
		  text-decoration: underline;
		}
		
		#container {
		  display: block;
		  margin: 0 auto;
		  width: 1024px;
		}
  
	  #information {
	    color: red;
	    font-size: 14px;
	  }
	  
	  .wrapper {
	    display: inline-block;
	    width: 310px;
	    height: 100px;
	    vertical-align: top;
	    margin: 1em 1.5em 2em 0;
	    cursor: pointer;
	    position: relative;
	    font-family: Tahoma, Arial;
	    -webkit-perspective: 4000px;
	       -moz-perspective: 4000px;
	        -ms-perspective: 4000px;
	         -o-perspective: 4000px;
	            perspective: 4000px;
	  }
  
	  .item {
	    height: 100px;
	      -webkit-transform-style: preserve-3d;
	         -moz-transform-style: preserve-3d;
	          -ms-transform-style: preserve-3d;
	           -o-transform-style: preserve-3d;
	              transform-style: preserve-3d;
	      -webkit-transition: -webkit-transform .6s;
	         -moz-transition: -moz-transform .6s;
	          -ms-transition: -ms-transform .6s;
	           -o-transition: -o-transform .6s;
	              transition: transform .6s;
	  }
  
    .item:hover {
      -webkit-transform: translateZ(-50px) rotateX(95deg);
         -moz-transform: translateZ(-50px) rotateX(95deg);
          -ms-transform: translateZ(-50px) rotateX(95deg);
           -o-transform: translateZ(-50px) rotateX(95deg);
              transform: translateZ(-50px) rotateX(95deg);
    }
    
      .item:hover img {
        box-shadow: none;
        border-radius: 15px;
      }
      
      .item:hover .information {
        box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
        border-radius: 3px;
      }

    .item img {
      display: block;
      position: absolute;
      top: 0;
      border-radius: 3px;
      box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
      -webkit-transform: translateZ(50px);
         -moz-transform: translateZ(50px);
          -ms-transform: translateZ(50px);
           -o-transform: translateZ(50px);
              transform: translateZ(50px);
      -webkit-transition: all .6s;
         -moz-transition: all .6s;
          -ms-transition: all .6s;
           -o-transition: all .6s;
              transition: all .6s;
      
    }
    
    .item .information {
      display: block;
      position: absolute;
      top: 0;
      height: 80px;
      width: 290px;
      text-align: left;
      border-radius: 15px;
      padding: 10px;
      font-size: 12px;
      text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
      box-shadow: none;
      background: rgb(236,241,244);
      background: -webkit-linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
      background: -ms-linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
      background: linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);

      -webkit-transform: rotateX(-90deg) translateZ(50px);
         -moz-transform: rotateX(-90deg) translateZ(50px);
          -ms-transform: rotateX(-90deg) translateZ(50px);
           -o-transform: rotateX(-90deg) translateZ(50px);
              transform: rotateX(-90deg) translateZ(50px);
      -webkit-transition: all .6s;
         -moz-transition: all .6s;
          -ms-transition: all .6s;
           -o-transition: all .6s;
              transition: all .6s;
      
    }
    
      .information strong {
        display: block;
        margin: .2em 0 .5em 0;
        font-size: 20px;
        font-family: "Oleo Script";
      }
	</style>
</head>
<body>
	<div id="container">
    
	    <h1>CSS3 3D变形制作产品信息展示</h1>
	    
	    <div class="wrapper">
	      <div class="item">
	        <img src="images/contact.png" />
	        <span class="information">
	          <strong>Contact Form</strong> The easiest way to add a contact form to your shop.
	        </span>
	      </div>
	    </div>
	    
	    <div class="wrapper">
	      <div class="item">
	        <img src="images/chimpified.jpeg" />
	        <span class="information">
	          <strong>Chimpified</strong> Chimpified connects your Shopify store to your Mailchimp account.
	        </span>
	      </div>
	    </div>
	    
	    <div class="wrapper">
	      <div class="item">
	        <img src="images/olark.png" />
	        <span class="information">
	          <strong>Olark Chat</strong> Chat with your customers. Watch them fill their shopping carts.
	        </span>
	      </div>
	    </div>
	    
	    <div class="wrapper">
	      <div class="item">
	        <img src="images/jilt.png" />
	        <span class="information">
	          <strong>Jilt</strong> Jilt lets you easily and effectively follow up with customers who have abandoned their orders.
	        </span>
	      </div>
	    </div>
	    <div class="wrapper">
	      <div class="item">
	        <img src="images/ordoro.png" />
	        <span class="information">
	          <strong>Ordoro</strong> Automate your backoffice: aggregate orders, manage inventory, print shipping labels.
	        </span>
	      </div>
	    </div>
	    <div class="wrapper">
	      <div class="item">
	        <img src="images/yotpo.jpeg" />
	        <span class="information">
	          <strong>Yotpo</strong> Social reviewing solution,increase your social engagement through social reviews.
	        </span>
	      </div>
	    </div>
	    
	  </div>  	
</body>
</html>